<template>
<!-- 购物页面 -->
  <div class="shopcart">
    <!-- 购物头部 -->
    <ShopcartHeader></ShopcartHeader>
    <!-- 购物内容 -->
    <ShopcartContent :list="list" @cartDel="cartDel" @cartCount="cartCount"></ShopcartContent>
    <ShopcartBottom></ShopcartBottom>
    <Tabbar :active="2"></Tabbar>
  </div>
</template>

<script>
import Tabbar from '../../components/tabbar.vue'
import ShopcartHeader from './components/shopcartHeader.vue'
import ShopcartContent from './components/shopcartContent.vue'
import ShopcartBottom from './components/shopcartBottom.vue'

import {mapState} from 'vuex'

import {cartDel,cartCount} from '@/api'
export default {
  components:{
    Tabbar,
    ShopcartHeader,
    ShopcartContent,
    ShopcartBottom
  },
  mounted(){
    // 全选或者取消
    this.$store.dispatch('getCartList')
  },
  computed: {
    // 解构vuex里面的商品数据
    ...mapState(['list'])
  },
  methods:{
    // 商品的删除处理
    cartDel(item){
      cartDel({id:item.id},(res)=>{
        if(res.status === 0){
          console.log('删除成功');
          // 删除完成后再次获取购物车数据
          this.$store.dispatch('getCartList')
        }
      })
    },
    // 加减商品
    cartCount(params){
      cartCount(params,(res)=>{
        console.dir(res)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .shopcart{
    width: 100%;
    background-color: rgb(247, 247, 247);
  }
</style>